<template>
    <view>
        <!-- 头像区域 -->
        <view class="text-center pt-3 pb-5 text-white" style="background-image: linear-gradient(to right, #FF5A5F, #FFA500);">
            <navigator
                url="/pages/teacher/setting"
                open-type="navigate"
                hover-class="navigator-hover"
                class="text-right mt-5 pr-5">个人设置<u-icon name="arrow-right" size="25" /></navigator>
            <u-avatar :src="userInfo.img" class="avatar" size="200"></u-avatar>
            <view class="user-info mt-2">
                <view>
                    <text class="name text-lg font-bold mr-2">{{ userInfo.name }}</text>
                    <u-icon v-if="userInfo.sex == '男'" name="man" />
                    <u-icon v-if="userInfo.sex == '女'" name="woman" />
                </view>
                
                <text class="phone">{{ userInfo.phone }}</text>
            </view>
        </view>

        <view class="flex flex-center text-center mt-10 mx-5" style="border-radius: 5px;">
            <view class="">
                <text class="font-bold font-size-4 text-black">本月底薪</text>
                <br/>
                <text class="text-gray">{{  userInfo.commission }}</text>
            </view>
            <view class="flex-1">
                <text class="font-bold font-size-4 text-black">本月提成</text>
                <br/>
                <text class="text-gray">0</text>
            </view>
            <view class="">
                <text class="font-bold font-size-4 text-black">本月课销</text>
                <br/>
                <text class="text-gray">0</text>
            </view>
        </view>
        <!-- 历史工资 -->
        <view class="m-5 mt-10">
            <view style="border-left:5px solid gray; height:15px;line-height:15px;" class="p-0 pl-2 mb-3">历史工资</view>
            <view>
                <view v-for="(item, index) in monthCommissions"  :key="index" class="flex align-center py-2 border-b-1 border-gray border-b-solid">
                    <text class="text-gray flex-1">{{ item.time }}</text>
                    <text class="text-gray flex-1">{{ item.course_num }}课</text>
                    <text class="text-red"><u-icon name="rmb" />{{ item.base_commission + item.course_commission }}</text>
                    <!-- <u-icon name="arrow-right" size="20" class="text-red ml-1" /> -->
                </view>

                <u-empty v-if="monthCommissions.length === 0" text="暂无数据" mode="history" class="pt-10" icon-size="150"></u-empty>
            </view>
        </view>
        
        <teacher-tabbar />
    </view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import teacherTabbar from './components/tabbar.vue';
import { http } from '../../utils/http';

const userInfo = ref({
    name: '',
    phone: '',
    sex: '',
    commission: 0,
    img: ''
})

const monthCommissions = ref([])

// onMounted(() => {
//     // 获取用户信息并更新 userInfo
//     http.get('/api-mini/teacher/info').then(res => {
//         userInfo.value = res.data
//     })
// });

onShow(() => {
    // 获取用户信息并更新 userInfo
    http.get('/api-mini/teacher/info').then(res => {
        userInfo.value = res.data
    })

    http.get('/api-mini/teacher/count/month-commission').then(res => {
        monthCommissions.value = res.data
    })
});


</script>
